<template>
	<view>
		<view class="positioningbox">
			<view class="uni-margin-wrap" v-if="imgbox.length">
				<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="5000"
					:duration="500">
					<swiper-item class="swiper-item" v-for="(item,index) in imgbox" :key="index">
						<image :src="item.img"></image>
					</swiper-item>
				</swiper>
			</view>
			<view class="searcherbox">
				<view class="input">
					<view class="imgbox">
						<image src="../../static/ss.png"></image>
					</view>
					<input v-model="keyword" maxlength="35" placeholder="搜索名称" />
					<view class="but" @click="ss()">
						搜索
					</view>
				</view>
			</view>
		</view>
		<view style="height: 472rpx;"></view>
		<view class="listbox" v-for="(item,index) in list" :key="index" @click="todetail(item,index)">
			<view class="leftbox">
				<image mode="aspectFill" :src="item.avator.split(',')[0]"></image>
			</view>
			<view class="rightbox">
				<view class="namebox">{{item.name}}</view>
				<view class="specbox">
					<view class="specitem" v-for="(s,sindex) in item.label_list.slice(0,3)" :key="sindex">
						{{s.major_name}}
					</view>
				</view>
				<view class="classbox">
					<text>专业：</text>{{item.major_arr.map(item=>item.major_name).join('/') || ''}}
				</view>
			</view>
		</view>
		<kong v-if="list.length==0"></kong>
	</view>
</template>

<script>
	import kong from '../../components/kong.vue'
	export default {
		components:{
			kong
		},
		data() {
			return {
				page:1,
				is_data:true,
				list:[],
				imgbox:[],
				keyword:'',
			}
		},
		onLoad() {
			this.getlist()
			this.getimg()
		},
		onReachBottom() {
			this.is_data&&this.getlist()
		},
		methods: {
			getlist(){
				this.$http({
					url:'/api/Activity/teacher',
					data:{
						page:this.page,
						limit:10,
						keyword:this.keyword
					}
				}).then(res=>{
					if(res.data.length){
						this.page++
						this.list.push(...res.data)
						return
					}
					this.is_data = false
				})
			},
			ss(){
				this.page = 1
				this.list = []
				this.getlist()
			},
			todetail(item,index){
				uni.navigateTo({
					url:'/pages/teacherinfo/teacherinfo?id='+item.id
				})
			},
			//获取轮播图
			getimg(){
				this.$http({
					url:'/api/Activity/banner_list',
					data:{
						type:5,//1首页轮播图2商城轮播图3课程轮播图4活动轮播图5老师轮播图 6新闻中心
					}
				}).then(res=>{
					this.imgbox = res.data
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.positioningbox {
		position: fixed;
		top: 0;
		z-index: 99999999;
		width: 750rpx;
		height: 430rpx;
		background-color: #FFF;
	
		.uni-margin-wrap {
			width: 750rpx;
			height: 300rpx;
	
			.swiper {
				height: 300rpx;
	
				.swiper-item {
					display: block;
					height: 300rpx;
					line-height: 300rpx;
					text-align: center;
					image{
						height: 300rpx;
						width: 100%;
					}
				}
			}
		}
		.searcherbox{
			width: 690rpx;
			padding: 0 30rpx;
			background-color: #FFF;
			height: 130rpx;
			.input{
				width: 690rpx;
				height: 70rpx;
				background: #FFFFFF;
				border-radius: 36rpx;
				opacity: 1;
				border: 2rpx solid #E2E2E2;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 40rpx;
				.imgbox{
					width: 74rpx;
					text-align: center;
					image{
						width: 33rpx;
						height: 28rpx;
					}
				}
				>input{
					width: 500rpx;
					line-height: 70rpx;
					font-size: 28rpx;
				}
				.but{
					width: 112rpx;
					height: 70rpx;
					background: #FF8A9B;
					border-radius: 36rpx;
					font-size: 28rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #F7F7F7;
					text-align: center;
					line-height: 70rpx;
				}
			}
		}
	
	}
	.listbox{
		width: 690rpx;
		padding:30rpx;
		// height: 222rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		display: flex;
		margin-top: 20rpx;
		align-items: center;
		.leftbox{
			width: 182rpx;
			image{
				width: 160rpx;
				height: 160rpx;
				background: #FFFFFF;
				border-radius: 7rpx;
			}
		}
		.rightbox{
			width: 508rpx;
			.namebox{
				font-size: 32rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #222222;
			}
			.specbox{
				display: flex;
				align-items: center;
				margin: 18rpx 0;
				flex-wrap: wrap;
				.specitem{
					width: fit-content;
					height: 50rpx;
					background: linear-gradient(90deg, #FEF0E5 0%, #FFE0CD 100%);
					border-radius: 8rpx 26rpx 26rpx 26rpx;
					line-height: 50rpx;
					font-size: 28rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #A07150;
					padding: 0 16rpx;
					margin-right: 16rpx;
					margin-top: 10rpx;
				}
			}
			.classbox{
				width: 508rpx;
				font-size: 28rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #222222;
				-webkit-line-clamp: 1;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
				>text{
					color: #555555;
				}
			}
		}
	}

</style>
